<template>
    <div class="common-echart-box"  >
      <div class="common-echart" :id="id"></div>
    </div>
    
  </template>
  <script setup>
  import * as echarts from "echarts";
  import {onMounted, onUnmounted, watch} from "vue";
  import {ElMessage } from 'element-plus';
  //传入参数
  const props=defineProps({
    loading:{
      type:Boolean,
      default:false
    },
    id:{
      type: String,
      default:''
    },
    title:{
      type: String,
      default:''
    },
    titleObj:{
      type: Object,
      default:null
    },
    grid:{
      type: Object,
      default:null
    },
    tooltip:{
      type: Object,
      default:null
    },
    xAxis:{
      type: Object,
      default:null
    },
    yAxis:{
      type: Object,
      default:null
    },
    xData:{
      type:Array,
      default:()=>{
        return []
      }
    },
    type:{
      type:String,
      default:"line"
    },
    series:{
      type:Array,
      default:null
    },
    dataset:{
      type:Object,
      default:null
    }
  })
  let myEchart = null
//   折线图
let lineChartOption = {
  backgroundColor: "#080b30",
  title: {
    text: "哎呦,不错哦",
    textStyle: {
      align: "center",
      color: "#fff",
      fontSize: 20,
    },
    top: "5%",
    left: "center",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 255, 233,0)",
            },
            {
              offset: 0.5,
              color: "rgba(255, 255, 255,1)",
            },
            {
              offset: 1,
              color: "rgba(0, 255, 233,0)",
            },
          ],
          global: false,
        },
      },
    },
  },
  grid: {
    top: "15%",
    left: "5%",
    right: "5%",
    bottom: "15%",
    // containLabel: true
  },
  xAxis: [
    {
      type: "category",
      axisLine: {
        show: true,
      },
      splitArea: {
        // show: true,
        color: "#f00",
        lineStyle: {
          color: "#f00",
        },
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: false,
      },
      boundaryGap: false,
      data: ["A", "B", "C", "D", "E", "F"],
    },
  ],

  yAxis: [
    {
      type: "value",
      min: 0,
      // max: 140,
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        margin: 20,
        textStyle: {
          color: "#d1e6eb",
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "注册总量",
      type: "line",
      // smooth: true, //是否平滑
      showAllSymbol: true,
      // symbol: 'image://./static/images/guang-circle.png',
      symbol: "circle",
      symbolSize: 25,
      lineStyle: {
        normal: {
          color: "#6c50f3",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 5,
          shadowOffsetX: 5,
        },
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#6c50f3",
        },
      },
      itemStyle: {
        color: "#6c50f3",
        borderColor: "#fff",
        borderWidth: 3,
        shadowColor: "rgba(0, 0, 0, .3)",
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2,
      },
      tooltip: {
        show: false,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(108,80,243,0.3)",
              },
              {
                offset: 1,
                color: "rgba(108,80,243,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(108,80,243, 0.9)",
          shadowBlur: 20,
        },
      },
      data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
    },
    {
      name: "注册总量",
      type: "line",
      // smooth: true, //是否平滑
      showAllSymbol: true,
      // symbol: 'image://./static/images/guang-circle.png',
      symbol: "circle",
      symbolSize: 25,
      lineStyle: {
        normal: {
          color: "#00ca95",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 5,
          shadowOffsetX: 5,
        },
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#00ca95",
        },
      },

      itemStyle: {
        color: "#00ca95",
        borderColor: "#fff",
        borderWidth: 3,
        shadowColor: "rgba(0, 0, 0, .3)",
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2,
      },
      tooltip: {
        show: false,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,202,149,0.3)",
              },
              {
                offset: 1,
                color: "rgba(0,202,149,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0,202,149, 0.9)",
          shadowBlur: 20,
        },
      },
      data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
    },
  ],

}
  onMounted(()=>{
    if(!props.id){
        ElMessage.error('请传入echarts元素ID')
      return
    }
    let chartDom=document.getElementById(props.id)
    if(!myEchart){
      //(dom,theme)  purple-passion：主题
      myEchart=echarts.init(chartDom)
    }
    setOptions()
    //resize监听
    window.addEventListener('resize', resizeChange)
  })
  onUnmounted(() => {
    //图表销毁
    echarts.dispose;
    //注销监听
    window.removeEventListener('resize', resizeChange)
  });
  //图表数据填充
  const setOptions=()=>{
    //折线图-柱状图
    if(props.type=='line'||props.type=='bar'&&props.series){
      if(props.titleObj){
        lineChartOption.title=props.titleObj
      }
    //   else{
    //     lineChartOption.title.text=props.title||''
    //   }
    //   if(props.tooltip){
    //     lineChartOption.tooltip=props.tooltip
    //   }
    //   if(props.grid){
    //     lineChartOption.grid=props.grid
    //   }
    //   if(props.xAxis){
    //     lineChartOption.xAxis=props.xAxis
    //   }
    //   else{
    //     lineChartOption.xAxis.data=props.xData
    //   }
    //   if(props.yAxis){
    //     lineChartOption.yAxis=props.yAxis
    //   }
    //   if(props.dataset){
    //     lineChartOption.dataset=props.dataset
    //   }
    //   lineChartOption.series=props.series
    //   myEchart.setOption(lineChartOption)
    // }
  }
  const resizeChange=()=>{
    myEchart.resize()
  }
  watch(()=>props.series,(newValue, oldValue)=>{
    setOptions()
  })
  watch(()=>props.dataset,(newValue, oldValue)=>{
    setOptions()
  })
  </script>
  <style scoped lang="sss">
  .common-echart-box{
    width:500px;
    height:500px;
  }
  .common-echart{
    width:100%;
    height:100%;
  }
  </style>